@use "./variables" as *;
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  &.up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--arrowBgColor);
  }
  &.down {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--arrowBgColor);
  }
  &.right {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--arrowBgColor);
  }
  &.left {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid var(--arrowBgColor);
  }
}
